<template>
 <div>
   <div style="margin-left: 20%;width: 60%;margin-top: 10px">
     <el-form ref="form" :model="user" label-width="120px">
       <el-form-item label="账号：">
         <el-input v-model="user.username"></el-input>
       </el-form-item>
       <el-form-item label="密码：">
         <el-input v-model="user.password" show-password></el-input>
       </el-form-item>
       <el-form-item label="确认密码：">
         <el-input v-model="password2" show-password></el-input>
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="add">注册系统</el-button>
         <el-button>取消</el-button>
       </el-form-item>
     </el-form>
     <div style="font-size: 10px;color: gray">
       <div style="float: left;margin-left: 30px">
         <router-link class="dv1" to="/">已有账号，点击登录</router-link>
       </div>
       <div style="float: right;margin-right: 30px">
         <router-link class="dv1" to="/register">忘记密码，点击找回</router-link>
       </div>
     </div>
   </div>

 </div>
</template>

<script setup>
import {ref} from "vue";
import { useRouter } from 'vue-router'
import axios from "axios";
const router = useRouter()

const password2 = new ref();

const user=new ref({})

const add=()=>{
  if(password2.value===user.value.password){
    axios.post("user/register",user.value).then(res=>{
      if(res.data.code==0){
        //注册 成功
        //跳转到登录页面
        router.push("/");
      }else {
        alert(res.data.data);
      }
    })
  }else {
    alert("亲，2次密码不一致！")
  }

}
</script>

<style scoped>
.dv1{
  color: gray;
}
</style>
